<template>
    <div class="container">
        <button @click="handle1">动态组件1</button>
        <button @click="handle2">动态组件2</button>
        <keep-alive exclude='dynamic'>
            <h1 :is="com">展示动态组件内容</h1>
        </keep-alive>
        <hr>
    </div>
</template>

<script>
    //kee-alive 用于缓存组件 避免组件重复渲染带来性能问题
    // 属性
    //1.include '组件的名1,组件名2' | [组件名1,组件名2] | /组件名1|组件名2/ 包含的都会缓存

    //2.exclude 排除的都不会缓存

    //3.max LRU算法 最大的缓存数量

    //activated 组件激活的时候触发

    //deactived 组件被缓存的时候触发

    import dynamic from "../08.动态组件"
    import Email from "../08.动态组件/Email.vue"
    export default {
        data() {
            return {
                com: "dynamic"
            }
        },
        components: {
            dynamic,
            Email
        },
        methods: {
            handle1() {
                this.com = 'dynamic'
            },
            handle2() {
                this.com = 'Email'
            }
        }
    }
</script>